<!--
 * @轮子的作者: 轮子哥
 * @Date: 2023-10-13 10:45:04
 * @LastEditTime: 2023-11-10 14:57:01
-->
<template>
    <div class="detail">
        <!--详情头部-->
        <div class="detail1">
            <div>
                <CommonImage class="detail2" :src="''" />
            </div>
            <div class="item">
                <div style="display: flex;justify-content: space-between;">
                    <div>
                        <div class="detail3">
                            <span class="detail5">
                                {{ detailData.communityName == null ? '-' : detailData.communityName }} &emsp;
                                {{ detailData.building }}{{ detailData.unit }}{{ detailData.roomIdentifier }}
                            </span>
                        </div>
                        <div class="detail4">
                            <span class="detail6">{{ detailData.no }}</span>
                            <span class="tag1" v-if="detailData.mustStatus == 0">{{ $t('text.Contract.l14') }}</span>
                            <span class="tag3" v-if="detailData.mustStatus == 1">{{ $t('text.Contract.l20') }}</span>
                            <span class="tag4" v-if="detailData.mustStatus == 2">{{ $t('text.Contract.l21') }}</span>

                            <span class="tag1" v-if="$route.query.index == 0 && detailData.dealPlanStatus == 0">
                                {{ $t('text.Contract.l15') }}
                            </span>
                            <span class="tag2" v-if="$route.query.index == 0 && detailData.dealPlanStatus == 1">
                                {{ $t('text.Contract.l18') }}
                            </span>
                            <span class="tag3" v-if="$route.query.index == 0 && detailData.dealPlanStatus == 2">
                                {{ $t('text.Contract.l23') }}
                            </span>

                            <span class="tag1" v-if="detailData.shareStatus == 0">{{ $t('text.Contract.l16') }}</span>
                            <span class="tag2" v-if="detailData.shareStatus == 1">{{ $t('text.Contract.l19') }}</span>
                            <span class="tag3" v-if="detailData.shareStatus == 2">{{ $t('text.Contract.l22') }}</span>
                        </div>
                    </div>

                    <!--右侧菜单-->
                    <div class="detail3" style="position: relative;margin-right: 20px;">

                        <div class="detail7">
                            <div class="detail8"><img src="../../assets/images/h34.svg" class="detail9"></div>
                            <div class="detail10">{{ $t('text.Contract.l123') }}</div>
                        </div>

                        <DialogLayout49>
                            <div class="detail7">
                                <div class="detail8"><img src="../../assets/images/h34.svg" class="detail9"></div>
                                <div class="detail10">{{ $t('text.Contract.l124') }}</div>
                            </div>
                        </DialogLayout49>
                        <DialogLayout53>
                            <div class="detail7">
                                <div class="detail8"><img src="../../assets/images/f10.svg" class="detail9"></div>
                                <div class="detail10">{{ $t('text.Contract.l125') }}</div>
                            </div>
                        </DialogLayout53>
                    </div>
                </div>

                <div class="detail15">
                    <div class="detail16">
                        <div class="detail13">
                            {{ detailData.dealPrice == null ? '-' :
                                String(detailData.dealPrice).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + "AED" }}
                            {{ $route.query.index == 1 ?
                                detailData.dealPriceUnit == '0' ? $t('text.Contract.l321') :
                                    detailData.dealPriceUnit == '1' ? $t('text.Contract.l322') :
                                        detailData.dealPriceUnit == '2' ? $t('text.Contract.l323') : '' : '' }}
                        </div>
                        <div class="detail14">
                            {{ $route.query.index == 1 ? $t('text.Contract.l312') : $t('text.Contract.l118') }}
                        </div>
                    </div>
                    <div class="detail16">
                        <div class="detail17">
                            {{ $route.query.index == 1 ? detailData.leaseTerm == null ? '-' : detailData.leaseTerm +
                                $t('text.Contract.l324') : detailData.payMethod == null ? '-' : detailData.payMethod }}
                        </div>
                        <div class="detail18">
                            {{ $route.query.index == 1 ? $t('text.Contract.l313') : $t('text.Contract.l119') }}
                        </div>
                    </div>
                    <div class="detail16">
                        <div class="detail17">{{ detailData.sellUserName == null ? '-' : detailData.sellUserName }}</div>
                        <div class="detail18">
                            {{ $route.query.index == 2 ? $t('text.Contract.l314') : $t('text.Contract.l120') }}
                        </div>
                    </div>
                    <div class="detail16">
                        <div class="detail17">{{ detailData.buyUserName == null ? '-' : detailData.buyUserName }}</div>
                        <div class="detail18">{{ $t('text.Contract.l121') }}</div>
                    </div>
                    <div class="detail16">
                        <div class="detail17">{{ detailData.signUserName == null ? '-' : detailData.signUserName }}</div>
                        <div class="detail18">20/07/2023&emsp;{{ $t('text.Contract.l122') }}</div>
                    </div>
                </div>
            </div>
        </div>
        <!--中间路由-->
        <div>
            <HouseDeatilNavigation @returnData="setPage" :navList="$route.query.index == 0 ? topNavList1 : topNavList2">
            </HouseDeatilNavigation>
        </div>
        <BasicDetail v-if="page == '1'" :detailData="detailData" :index="$route.query.index"></BasicDetail>
        <TransactionProgress v-if="page == '2'" :ids="{ id: detailData.id, sysUserId: detailData.signUserId,signUserName:detailData.signUserName }">
        </TransactionProgress>
        <ReceivableManage v-if="page == '3'" :status="detailData.mustStatus"></ReceivableManage>
        <PaidInManage v-if="page == '4'" :status="detailData.mustStatus"></PaidInManage>
        <PerformanceAllocation v-if="page == '5'" :status="detailData.shareStatus"></PerformanceAllocation>
    </div>
</template>
    
<script>
import TransactionProgress from "./TransactionProgress.vue"
import BasicDetail from "./BasicDetail.vue"
import PaidInManage from "./PaidInManage.vue"
import PerformanceAllocation from "./PerformanceAllocation.vue"
import ReceivableManage from "./ReceivableManage.vue"

import { findDetailById } from "../../http/api"
import CommonImage from "@/components/input/CommonImage.vue"

export default {
    name: "ContractSecondHouse",
    components: { BasicDetail, ReceivableManage, PaidInManage, PerformanceAllocation, TransactionProgress, CommonImage },
    data() {
        return {
            topNavList1: [
                this.$t("text.Contract.l126"),
                this.$t("text.Contract.l127"),
                this.$t("text.Contract.l128"),
                this.$t("text.Contract.l129"),
                this.$t("text.Contract.l130"),
                this.$t("text.Contract.l131"),
            ],
            topNavList2: [
                this.$t("text.Contract.l126"),
                this.$t("text.Contract.l128"),
                this.$t("text.Contract.l129"),
                this.$t("text.Contract.l130"),
                this.$t("text.Contract.l131"),
            ],
            page: 1,
            detailData: {}
        }
    },
    mounted() {
        if (this.$route.query.id != undefined) {
            findDetailById({ id: this.$route.query.id }).then(res => {
                if (res !== undefined && res != null) {
                    console.log(res)
                    this.detailData = res
                }
            }).catch()
        }
    },
    methods: {
        setPage(index) {
            if (this.$route.query.index != 0 && index > 1) {
                index = Number(index) + 1
            }
            this.page = index
        },
    },
    watch: {},
    computed: {},
}
</script>
    
<style scoped>
.detail {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.detail1 {
    display: flex;
    align-items: center;
    height: 80px;
    padding-left: 35px;
    padding-right: 35px;
    padding-top: 10px;
}

.detail2 {
    width: 170px;
    height: 110px;
    padding: 0;
    margin-top: 45px;
}

.detail3 {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    word-break: keep-all;
    padding-top: 5px;
    gap: 25px;
}

.detail4 {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    word-break: keep-all;
    padding-top: 5px;
    gap: 5px;
}

.detail5 {
    color: black;
    font-size: 16px;
    font-weight: 600;
}

.detail6 {
    color: #6698ff;
    border: 1px solid #6698ff;
    font-size: 12px;
    padding: 2px 5px;
    border-radius: 3px;
}

.detail7 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.detail8 {
    background: #6698ff;
    border-radius: 100%;
    width: 33px;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.detail9 {
    width: 17px;
    height: 17px;
}

.detail10 {
    color: #6698ff;
    font-size: 13px;
    padding-top: 5px;
}

.detail13 {
    color: rgba(255, 117, 117, 1);
    font-size: 14px;
    font-family: PingFang-SC-Heavy;
    font-weight: 900;
    text-align: left;
    white-space: nowrap;
}

.detail14 {
    overflow-wrap: break-word;
    color: rgb(98 98 98);
    font-size: 12px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 16px;
    margin: 2px 0 0 2px;
}

.detail15 {
    padding-top: 5px;
    display: flex;
    width: fit-content;
}

.detail16 {
    margin-right: 40px;
    display: flex;
    flex-direction: column;
    align-items: baseline;
}

.detail16:last-child {
    margin-right: 0px;
}

.detail17 {
    font-weight: 600;
    font-size: 15px;
}

.detail18 {
    overflow-wrap: break-word;
    color: rgb(98 98 98);
    font-size: 12px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 16px;
    margin: 2px 0 0 2px;
}

.tag1 {
    font-size: 12px;
    border-radius: 3px;
    background-color: #f6868629;
    border: 1px solid #f68686;
    padding: 3px 6px;
    color: #f68686;
    margin-right: 5px;
    white-space: nowrap;
}

.tag2 {
    font-size: 12px;
    border-radius: 3px;
    background-color: #f7ad5329;
    padding: 2px 6px;
    color: #f7ad53;
    border: 1px solid #f7ad53;
    margin-right: 5px;
    white-space: nowrap;
}

.tag3 {
    font-size: 12px;
    border-radius: 3px;
    background-color: #54d2d029;
    padding: 2px 6px;
    color: #54d2d0;
    border: 1px solid #54d2d0;
    margin-right: 5px;
    white-space: nowrap;
}

.tag4 {
    font-size: 12px;
    border-radius: 3px;
    padding: 2px 6px;
    margin-right: 5px;
    border: 1px solid #518aff;
    background: #518aff29;
    color: #518aff;
    white-space: nowrap;
}

.item {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 80px;
    margin-left: 15px;
    padding-top: 20px;
}
</style>